
import { Button, Input, Modal } from 'antd'
import { useRouter } from 'next/router'
import { useState } from 'react'
import useUser from "../../lib/useUser"
import styles from './index.module.scss'
import 'antd/lib/modal/style/index.css'
import 'antd/lib/input/style/index.css'
import fetch from '../../lib/fetch'

const Header = (props) => {
    const [loginShow, setLoginShow] = useState(false)
    const [ipt, setIpt] = useState('')
    const router = useRouter()
    const { user, mutateUser } = useUser()
    console.log(user)
    const toHome = () => {
        router.push('/')
    }
    const showLogin = () => {
        setLoginShow(true)
    }
    const hideLogin = () => {
        setLoginShow(false)
        setIpt('')
    }
    const login = async () => {
        try {
            await mutateUser(fetch({
                url: '/api/user/login',
                method: 'POST',
                data: {
                    username: ipt,
                },
            }))
            hideLogin()
        } catch(err) {
            throw(err)
        }
    }
    const logoutHandle = async () => {
        try {
            await mutateUser(fetch({
                url: '/api/user/logout',
                method: 'POST',
            }))
        } catch(err) {
            throw(err)
        }
    }
    const iptChange = e => {
        setIpt(e.target.value || '')
    }
    return (
        <>
            <header id='header'>
                <div className={`main ${styles.main}`}>
                    <div>
                        {/* 此按钮的样式在/pages/index.tsx导入, 当路由为/时表现正常 */}
                        <Button type='primary' onClick={toHome} >回首页</Button>
                    </div>
                    {
                        user.userInfo ? (
                            <div>
                                <div>欢迎你：{user.userInfo.username}</div>
                                <div onClick={logoutHandle}>退出登录</div>
                            </div>
                        ) : (
                            <div onClick={showLogin}>
                                登录
                            </div>
                        )
                    }
                </div>
                {
                    loginShow && (
                        <Modal
                            visible={true}
                            title='登录'
                            onCancel={hideLogin}
                            footer={null}
                        >
                            <Input value={ipt} onChange={iptChange} />
                            <Button onClick={login}>点击登录</Button>
                        </Modal>
                    )
                }
            </header>
            {/* <style jsx>{
                // 此方法也可作为组件级作用域样式。
                `
                    #header {
                        height: 70px;
                        background: #ccc;
                    }
                `
            }</style> */}
        </>
    )
}

export default Header